<template>
  <div class="message-title-container">
    <el-badge :is-dot="true" :hidden="hideBadge" class="badge-dot" @click.native="dialogTableVisible=true">
      <slot name="badge"></slot>
    </el-badge>

    <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body :before-close="resetNum">
      <div slot="title">
        <span style="padding-right: 10px;">系统消息</span>
        <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">清除所有</el-button>
      </div>
      <table-view :cols="header" :tableData="systemLogs" :max-height="500"></table-view>
    </el-dialog>
  </div>
</template>

<script>
// import TableView from '../../../../components/el-extend-components/TableView/TableView'
export default {
  name: 'SystemLog',
  // components: {TableView},
  data() {
    return {
      dialogTableVisible: false,
      header: [
        {field: 'msgId', hidden: false,  header: "消息id"},
        {field: 'type', hidden: false,  header: "类型"},
        {field: 'data', hidden: false,  header: "数据"},
      ]
    }
  },
  computed: {
    // 消息列表
    systemLogs() {
      return this.$store.getters.systemLogs
    },
    // 未读数量
    unreadLogNum() {
      return this.$store.getters.unreadLogNum
    },
    // 是否隐藏点
    hideBadge() {
      return this.dialogTableVisible || this.unreadLogNum === 0
    }
  },
  methods: {
    // 清除所有消息
    clearAll() {
      this.$confirm('确定要清空所有消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.dialogTableVisible = false
        this.$store.commit('log/CLEAR_SYSTEM_LOG')
      })
    },
    // 重置未读数量
    resetNum() {
      this.dialogTableVisible = false
      this.$store.commit('log/CLEAR_UNREAD_LOG_NUM')
    },
  }
}
</script>

<style lang="scss" scoped>
.message-title-container {
  width: 100%;
  height: 100%;

  .badge-dot {
    width: 100%;
    height: 100%;
    top: -2px;
    /deep/ .el-badge__content.is-fixed {
      top: calc(50% - 10px) !important;
    }
  }
}
</style>
